<template>
  <Box class="epidemic-car-source-detail-wrapper" title="车辆来源详情" direction="row" >
    <Panel second class="line-chart-box" :title="title">
      <div class="car-sequential-same">
        <div class="same-content">
          <SequentialSame :data="sameData"> </SequentialSame>
        </div>
      </div>
      <ShadowLine :seriesData="seriesData" title="24小时走势图" :xDate="xDate" />
    </Panel>

    <Panel second class="flow-car">
      <div class="title">
        <span class="car-name">客货分析</span>
        <span class="guest-van">
          <span class="guest">客车</span>
          <span class="van">货车</span>
        </span>
      </div>
      <div class="analysis-wrapper">
        <carAnalysis
          :pieChartData="pieChartData"
          type="accounted"
          :guestAccounted="hcHcZb.kc"
          :vansAccounted="hcHcZb.hc"
        >
        </carAnalysis>
      </div>
    </Panel>

    <div class="top-container">
      <div class="destination top-five">
        <TopCity titile="省内目的地TOP5" :rinkList="topFiveState.provincialDestinationList">
          <template #row="{ item }">
            {{ item.value }}
          </template>
        </TopCity>
      </div>

      <div class="source top-five">
        <TopCity title="来源地TOP5" :rinkList="topFiveState.sourceList">
          <template #row="{ item }">
            {{ item.value }}
          </template>
        </TopCity>
      </div>
    </div>
  </Box>
</template>
<script>
export default {
  name: 'EpidemicCarSourceDetail'
}
/**
 * 疫情车辆来源详情（3级）
 * @author 邓清波
 * @date   2022/10/25
 */
</script>
<script setup>
import TopCity from '../../components/top-city/index.vue'
import ShadowLine from '../../components/charts/ShadowLine.vue'
import { reactive, ref, onMounted } from 'vue'
import Panel from '../../components/panel'
import Box from '../../components/detail/Box.vue'
import SequentialSame from '../../components/sequential-same'
import epidemicApi from '../../api/epidemic'
import CarAnalysis from '../../components/car-analysis'

// 同环比
const sameData = reactive({
  ring: 0,
  same: 0
})

const title = ref('今日累计风险车辆 0（辆）')

// 客车获车占比
const hcHcZb = ref({
  hc: 0,
  kc: 0
})

const seriesData = ref([
  {
    // 折线数据
    gradientColor: [
      { offset: 0, color: 'rgb(158, 205, 245)' },
      { offset: 1, color: 'rgb(210, 229, 251)' }
    ],
    color: '#266bf4',
    data: []
  }
])
const xDate = ref([]) // 折线x轴
const topFiveState = ref({
  sourceList: [], // 来源地
  provincialDestinationList: [] // 省内目的地
})
const pieChartData = ref([]) // 饼图数据

onMounted(() => init())

/**
 * 组件业务初始化
 * **/
function init() {
  getData()
}
function getData() {
  const params = {
    province: '32',
    roadType: '2'
  }
  epidemicApi.getVehiclesSourceDetail(params).then(res => {
    topFiveState.value.sourceList = res.data.sourceList || []
    topFiveState.value.provincialDestinationList = res.data.provincialDestinationList || []
    seriesData.value[0].data = (res.data.realTimeModelList || []).map(i => Number(i.value))
    xDate.value = (res.data.realTimeModelList || []).map(i => i.name)
    sameData.same = res.data.todayEpidemicVehicleTotalTb
    sameData.ring = res.data.todayEpidemicVehicleTotalHb
    const epidemicVehicleKc = res.data.epidemicVehicleKc || 0
    const epidemicVehicleHc = res.data.epidemicVehicleHc || 0
    const sum = epidemicVehicleKc + epidemicVehicleHc
    hcHcZb.value.hc = ((epidemicVehicleHc / sum) * 100).toFixed(1)
    hcHcZb.value.kc = ((epidemicVehicleKc / sum) * 100).toFixed(1)
    title.value = `今日累计风险车辆 ${res.data.todayEpidemicVehicleTotal || 0} (辆)`

    pieChartData.value = [
      {
        name: '客车',
        value: epidemicVehicleKc
      },
      {
        name: '货车',
        value: epidemicVehicleHc
      }
    ]
  })
}
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.mz-panel-content-main {
  align-items: baseline !important;
}

.epidemic-car-source-detail-wrapper {
  .line-chart-box {
    width: 297px;
    height: 100%;
  }

  .flow-car {
    width: 319px;
    height: 100%;
    display: flex;

    .analysis-wrapper {
      display: flex;
      flex: 1;
      width: 100%;
      justify-content: space-between;
    }

    .title {
      display: flex;
      justify-content: space-between;

      .car-name {
        font-weight: 600;
        color: #333333;
        font-size: 14px;
        word-break: keep-all;
      }

      .guest-van {
        display: flex;
        width: 100px;
        justify-content: space-between;

        .guest,
        .van {
          display: flex;
          align-items: center;
        }

        .guest:before,
        .van:before {
          content: '';
          width: 10px;
          height: 10px;
          border-radius: 3px;
          display: inline-block;
          margin-right: 4px;
        }

        .guest:before {
          background: @primary-color;
        }

        .van:before {
          background-color: #19bbce;
        }
      }
    }

    .introduce {
      display: flex;
      flex-wrap: wrap;

      .south-guest-car,
      .north-guest-car {
        width: 50%;
        text-align: left;
      }

      .south-van-car,
      .north-van-car {
        width: 50%;
        text-align: right;
      }

      .south-guest-car:before,
      .south-van-car:before,
      .north-guest-car:before,
      .north-van-car:before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 3px;
        display: inline-block;
        margin-right: 4px;
      }

      .south-guest-car:before {
        background: #4287fe;
      }

      .south-van-car:before {
        background: #34d6e9;
      }

      .north-guest-car:before {
        background: @primary-color;
      }

      .north-van-car:before {
        background: #19bbce;
      }
    }
  }

  .top-container {
    display: flex;
    flex: 1;

    .top-five {
      flex: 1;
      height: 100%;
    }

    .top-five:last-child {
      margin-left: 6px;
    }
  }
}

.car-sequential-same {
  display: flex;
  justify-content: flex-end;

  .same-content {
    flex: none;
    /deep/ .sequential {
      margin-right: 10px;
    }
  }
}
</style>
